<template>
  <el-button
    :type="component.buttonType || 'primary'"
    :size="component.size || 'medium'"
    :style="buttonStyles"
    :round="component.round"
    :circle="component.circle"
    @click="handleClick"
    :disabled="component.disabled"
  >
    {{ component.text || '按钮' }}
  </el-button>
</template>

<script>
import { defineProps, computed } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'ButtonComponent',
  props: {
    component: {
      type: Object,
      required: true,
      description: '按钮组件配置'
    },
    isPreview: {
      type: Boolean,
      default: false,
      description: '是否预览模式'
    }
  },
  setup(props) {
    // 按钮样式
    const buttonStyles = computed(() => ({
      width: '100%',
      height: '100%',
      backgroundColor: props.component.backgroundColor || '',
      color: props.component.color || '',
      fontSize: props.component.fontSize ? `${props.component.fontSize}px` : '',
      borderRadius: props.component.borderRadius ? `${props.component.borderRadius}px` : ''
    }));
    
    // 按钮点击事件
    const handleClick = () => {
      if (props.component.clickAction === 'message') {
        ElMessage.info(props.component.messageText || '按钮被点击了');
      } else if (props.component.clickAction === 'link' && props.component.linkUrl) {
        window.open(props.component.linkUrl, props.component.linkTarget || '_blank');
      } else if (props.component.clickAction === 'custom' && props.component.customFunction) {
        try {
          // 执行自定义函数（实际项目中应限制此功能或使用安全的函数映射）
          const func = new Function(props.component.customFunction);
          func();
        } catch (error) {
          console.error('自定义函数执行错误:', error);
          ElMessage.error('自定义函数执行错误');
        }
      }
      
      // 触发自定义事件
      if (props.component.eventName) {
        // 在实际项目中，这里可以通过事件总线触发全局事件
        console.log(`触发事件: ${props.component.eventName}`);
      }
    };
    
    return {
      buttonStyles,
      handleClick
    };
  }
};
</script>
    